const vDom = {
  // 标签名称
  tag: "div",
  // 属性
  attrs: {
    class: "app",
    title: "哈哈哈哈",
 
  },
  // 子节点
  children: [
    {
      tag: "a",
      attrs: {
        href: "http://www.baidu.com",
        style: "color: red;"
      },
      children: ["点我去百度"],
    },
    {
      tag: "a",
      attrs: {
        href: "http://www.baidu.com",
      },
      children: ["点我去百度"],
    },
    {
      tag: "a",
      attrs: {
        href: "http://www.baidu.com",
        style: "color: red;"
      },
      children: ["点我去百度"],
     
    },
  ],
};

const render = (vDom) => {
  if(typeof vDom === 'string') return document.createTextNode(vDom)
  // 创建节点
  const node = document.createElement(vDom.tag);
  // 添加属性
  if (vDom.attrs) {
    Object.entries(vDom.attrs).forEach(([key, value]) => {
      node.setAttribute(key, value);
    });
  }
  // 添加子节点
  if (vDom.children) {
    vDom.children.forEach((v) => {
      node.appendChild(render(v));
    });
  }
  return node;
};
const root = document.querySelector("#root");
const dom = render(vDom);
console.log(dom);
root.appendChild(dom);
